<template>
  <div class="m-page">
    <van-nav-bar
      class="m-page__bar"
      title="登录"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-field
        v-model="mobile"
        label="手机号码"
        type="tel"
        placeHolder="请输入手机号码"
      />
      <van-field
        v-model="password"
        label="登录密码"
        type="password"
        placeHolder="请输入登录密码"
      >
        <van-button
          @click="goToForgetPassword"
          slot="button"
          size="small"
          plain
          type="primary"
          >忘记密码</van-button
        >
      </van-field>
    </van-cell-group>
    <div class="g-p--10">
      <van-button type="danger" size="large" @click="doLogin"
        >确认登陆</van-button
      >
      <van-button
        @click="goToRegister"
        class="g-mt--10"
        type="primary"
        plain
        size="large"
        >注册</van-button
      >
    </div>
    <div class="p-logo-wrap"><img src="~_a/img/logo.png" alt="" /></div>
  </div>
</template>

<script>
import { NavBar, CellGroup, Field, Button } from "vant";
// import { mapState } from "vuex";
// import { userModel } from "@/api";
import Tool from "@/lib/tool";
const tool = new Tool();
export default {
  name: "user_info",
  components: {
    "van-nav-bar": NavBar,
    "van-cell-group": CellGroup,
    "van-field": Field,
    "van-button": Button
  },
  data() {
    return {
      // password: "",
      // mobile: "",
      back_url: ""
    };
  },
  computed: {
    password: {
      get() {
        return this.$store.state.loginInfo.password;
      },
      set(value) {
        this.$store.commit("updateLoginInfo", { password: value });
      }
    },
    mobile: {
      get() {
        return this.$store.state.loginInfo.mobile;
      },
      set(value) {
        this.$store.commit("updateLoginInfo", { mobile: value });
      }
    }
  },
  mounted() {
    let sl_loginInfo = window.localStorage.getItem("loginInfo") || "";
    let loginInfo = {
      mobile: "",
      password: ""
    };
    if (sl_loginInfo) {
      loginInfo = JSON.parse(sl_loginInfo).value;
    }
    this.back_url = decodeURIComponent(this.$route.query.redirect || "/");
    if (this.back_url === "/login" || this.back_url === "/register") {
      this.back_url = "/";
    }
    if (loginInfo) {
      this.$store.commit("updateLoginInfo", loginInfo);
    }
  },
  methods: {
    doLogin() {
      const loginInfo = { password: this.password, mobile: this.mobile };
      if (!tool.formDataCheck(loginInfo)) {
        this.$toast({
          type: "fail",
          message: "必填项为空！",
          duration: 1500
        });
        return;
      }
      // dispatch toLogin action
      this.$store.dispatch("doLogin", loginInfo).then(() => {
        // dispatch getUserInfo action
        this.$ls.set("loginInfo", loginInfo);
        this.$store.dispatch("getUserInfo");
        this.$router.replace({
          path: this.back_url
        });
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    goToRegister() {
      this.$router.push({
        name: "register",
        query: {
          redirect: this.back_url
        }
      });
    },
    goToForgetPassword() {
      this.$router.push({
        name: "forget_password",
        query: {
          redirect: this.back_url
        }
      });
    }
  }
};
</script>

<style scoped></style>
